<template>
  <!--
  查：
    1：定义接口api
    2:导入接口api
    3:进入页面调用api获取数据，存储并渲染
    4：如果有分页，需要做分页处理
  增：
    1：创建了一个新增弹框组件
    2：在父组件导入注册使用
    3：点击新增按钮打开弹框
    4：完成新增弹框内部布局（包含一些数据）
    5：完成了表单验证处理
    6：定义导入与调用新增api
    7:调用成功
       关闭弹框（重置表单数据与验证）
       提示
       刷新父级列表数据

  删：
     1：点击删除弹出确认框
     2：定义导入与调用删除api（点击确认框确定按钮时调用）
     3:调用完成
        a:提示
        b:刷新列表
        c:如果有分页，还需要做分页处理

  改：
    1：点击修改：打开新增弹框
    2：弹窗内数据回显：
        数据要深拷贝（当前点击行数据包含编辑数据）
        调用接口获取数据回显（当前点击行数据不包含编辑数据）
    3：在弹窗组件内定义一个mode用于区分场景
    4：新增与修改打开弹框都要修改mode为相应的值
    5：调整标题(依赖mode的值)
    6：调用了表单验证
    7：定义导入与分场景调用编辑api
    8:调用完成
       a:关闭弹框
       b:清除表单数据与验证(不要完全依靠resetFields方法，这个方法不靠谱，它会重置成初始值，需要手动清空)
       c:提示
       d:刷新父级列表
 -->

  <div
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    class="departments"
  >
    <el-card>
      <div class="main">
        <div class="top">
          <div class="name">传智教育</div>
          <div class="manager">负责人</div>
          <!-- el-dropdown
                默认插槽
                具名插槽(dropdown)
                el-dropdown-menu
                  el-dropdown-item
          -->
          <el-dropdown>
            <div class="option">
              <span>操作</span>
              <i class="el-icon-arrow-down" />
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <!-- 增删改查 -->
                <el-dropdown-item
                  @click.native="addEvent('')"
                >添加子部门</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <!-- 树形结构 -->
        <el-tree
          style="margin-top: 15px"
          :data="list"
          :props="{
            label: 'name',
            children: 'children'
          }"
          default-expand-all
        >
          <template v-slot="{ data }">
            <div class="top" style="width: 100%">
              <div class="name">{{ data.name }}</div>
              <div class="manager">{{ data.manager }}</div>
              <el-dropdown>
                <div class="option">
                  <span>操作</span>
                  <i class="el-icon-arrow-down" />
                </div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item
                      @click.native="addEvent(data.id)"
                    >添加子部门</el-dropdown-item>
                    <el-dropdown-item
                      @click.native="editEvent(data)"
                    >编辑部门</el-dropdown-item>
                    <el-dropdown-item
                      @click.native="delEvent(data.id)"
                    >删除部门</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>
        </el-tree>
      </div>
    </el-card>
    <!-- 新增弹框 -->
    <Add ref="add" :init-list="initList" @getData="getData" />
  </div>
</template>
<script>
import { companyDepartment, companyDepartmentDelete } from '@/api/departments'
import Add from './components/add.vue'
export default {
  components: {
    Add
  },
  data() {
    return {
      list: [],
      initList: [],
      loading: false
    }
  },
  async created() {
    this.getData()
  },
  methods: {
    async getData() {
      this.loading = true
      const res = await companyDepartment()
      this.initList = res.data.depts
      this.list = this.changeData(res.data.depts)
      this.loading = false
      // console.log('组织架构列表', res)
      // console.table(res.data.depts)
    },
    changeData(arr, pid = '') {
      // 1:找出数据的第一层
      // 2:找出任意层数据（任意项的子集），将pid变成形参
      // 3:给找出的每一项加一个children=[]
      // 4:使用递归找出item项的子集（子集的pid是自己的id）
      return arr.filter((item) => {
        if (item.pid === pid) {
          item.children = this.changeData(arr, item.id)
          return true
        }
      })
    },
    // 新增点击事件
    addEvent(pid) {
      // 打开弹框
      this.$refs.add.show = true
      this.$refs.add.form.pid = pid
      // 修改add内的场景值
      this.$refs.add.mode = 'add'
    },
    // 删除点击事件
    async delEvent(id) {
      await this.$confirm('您确定删除该项吗?', '温馨提示')
      await companyDepartmentDelete(id)
      this.$message.success('删除成功')
      this.getData()
    },
    // 编辑点击事件
    editEvent(data) {
      // 打开弹框
      this.$refs.add.show = true
      // 数据回显
      // 深拷贝： 1：递归方式  2：JSON.parse(JSON.stringify(data))
      this.$refs.add.form = JSON.parse(JSON.stringify(data))
      // 修改add内的场景值
      this.$refs.add.mode = 'edit'
      console.log(data)
    }
  }
}
</script>
<style lang="scss" scoped>
.departments {
  padding: 20px;
  .main {
    width: 80%;
    margin: 0 auto;
    .top {
      display: flex;
      align-items: center;
      .name {
        flex: 1;
      }
      .manager {
        width: 120px;
      }
    }
  }
}
</style>
